<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	ul,
	ol {
		list-style: none;
	}

	//头部
	.header {
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: #fff;

		.head {
			// position: fixed;
			// top: 0rpx;
			// left: 0rpx;
			padding: 15rpx 10rpx;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			border: 2rpx solid #e5e5e5;
			overflow: hidden;

			.case,
			.shopCar {
				width: 100rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 50rpx;
					height: 46rpx;
				}
			}

			.search {
				width: calc(100% - 200rpx);
				position: relative;
				background-color: #eee;
				border-radius: 6rpx;

				img {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 12rpx;
					top: 14rpx;

				}

				.inp {
					height: 100%;
					padding: 0rpx 0rpx 0rpx 60rpx;
					border: none;
					color: #999;
					font-size: 30rpx;
				}
			}


		}

	}

	.main {
		display: flex;
		justify-content: space-between;
		padding-top: 92rpx;

		.left {
			overflow-y: auto;
			flex-shrink: 0;
			width: 170rpx;
			height: calc(100vh - 92rpx);

			/* 固定宽度 */
			// 隐藏滚动条（兼容多端）
			&::-webkit-scrollbar {
				display: none;
			}

			scrollbar-width: none;
			-ms-overflow-style: none;

			.lists {
				.list {
					width: 170rpx;
					height: 90rpx;
					line-height: 90rpx;
					display: flex;
					justify-content: left;
					align-items: center;
					background-color: #F6F6F6;
					font-size: 26rpx;
					color: #666;

					p {
						width: 100%;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
					}
				}
			}

			// 注意：.lists.active 应直接作用于 .list，不需要嵌套
			.lists.active .list {
				background-color: #fff;
				font-weight: bold;
				color: #FF5777;

				p {
					border-left: 6rpx solid #FF5777;
				}
			}
		}

		.right {
			width: calc(100% - 170rpx);
			height: calc(100vh - 92rpx);
			overflow-y: auto;
			background-color: #fff;

			/* 显式开启右侧滚动 */
			// padding: 20rpx;
			.top-nav {
				padding: 20rpx 20rpx 22rpx;
				display: flex;
				flex-direction: wrap;
				flex-wrap: wrap;
				// justify-content: space-between;
				// gap: 6rpx;
				column-gap: 6rpx;

				.items {
					width: 176rpx;
					height: 190rpx;
					margin: 20rpx 0rpx;
					color: #666;
					font-size: 24rpx;

					.i-img {
						width: 130rpx;
						height: 130rpx;
						margin: 0rpx auto;

						img {
							width: 100%;
							height: 100%;

						}
					}

					.i-name {
						margin: 20rpx 0rpx 0rpx;
						text-align: center;
					}
				}
			}

			.bottom-list {
				.list-nav {
					width: 100%;
					height: 78rpx;
					line-height: 78rpx;
					position: sticky;
					top: -2rpx;
					background-color: #fff;
					z-index: 10;

					ul {
						height: 78rpx;
						line-height: 78rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 2rpx solid #e6e6e6;

						li {
							width: calc(100% / 3);
							height: 30rpx;
							line-height: 30rpx;
							text-align: center;
							font-size: 28rpx;
							color: #333;
							// margin: 0 auto;
							// vertical-align: middle;
							margin: auto 0rpx;
							border-left: 2rpx solid #e6e6e6;
						}

						li.active {
							color: #EF4562;
						}
					}
				}

				.list {
					padding: 14rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					// flex-direction: wrap;
					.list-item {
						width: 268rpx;
						// padding-bottom: 600rpx;
						margin-bottom: 10rpx;

						.i-img {
							width: 268rpx;
							height: 358rpx;

							position: relative;

							img {
								width: 100%;
								height: 100%;
								border-top-left-radius: 10rpx;
								border-top-right-radius: 10rpx;
							}

							.i-soldNum {
								position: absolute;
								bottom: 14rpx;
								left: 0rpx;
								color: #fff;
								min-width: 50%;
								max-width: 70%;
								height: 46rpx;
								line-height: 46rpx;
								background: url('/static/backgroundColor.png');
								background-size: cover;
								font-size: 24rpx;
								text-align: center;
							}
						}

						.i-bottom {
							width: 100%;
							padding: 10rpx 12rpx 10rpx;

							// box-sizing: border-box;
							.i-text {
								width: 100%;
								height: 34rpx;
								line-height: 34rpx;
								font-size: 24rpx;
								color: #333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.i-price-collectNum {
								display: flex;
								justify-content: space-between;
								margin-top: 6rpx;

								.price {
									font-size: 30rpx;
									color: #FF5777;
									font-weight: bold;
								}

								.collectNum {
									display: flex;
									justify-content: right;


									.num {
										line-height: 40rpx;
										font-size: 24rpx;
										color: #999;
										padding: 0rpx 6rpx;
									}

									.icon {
										width: 24rpx;
										// height: 24rpx;
										height: 100%;
										display: flex;
										justify-content: center;
										align-items: center;

										image {
											width: 100%;
											height: 100%;
										}
									}

								}
							}
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class="header">
		<view class="head">
			<view class="case">
				<img src="/static/base.png" alt="" />
			</view>
			<view class="search" @click="jumpSearch">
				<img src="/static/search.png" alt="" />
				<input class="inp" type="text" placeholder="上衣" placeholder-style="color:#999;font-size:20rpx" />
			</view>
			<view class="shopCar">
				<img src="/static/shopCar.png" alt="" />
			</view>
		</view>
	</view>
	<view class="main">
		<!-- 左边分类导航条 -->
		<view class="left">
			<view class="lists" v-for="(item,index) in navList" :key="item.maitKey"
				@click="changeActiveLeft(item.maitKey,item.miniWallkey)"
				:class="{active:item.maitKey == currentActive}">
				<view class="list">
					<p>{{item.title}}</p>
				</view>
			</view>
		</view>

		<view class="right">
			<!-- 右边上面图片导航 -->
			<view class="top-nav">
				<view class="items" v-for="(item , index) in imgCategory" :key="index"
					@click="navImg(item.link,item.title)">
					<view class="i-img">
						<!-- :style="{backgroundImage:`url(${item.image})`}" -->
						<img :src="item.image" alt="" />
					</view>
					<view class="i-name">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 右边下面分类导航及商品列表-->
			<view class="bottom-list">
				<!-- 分类导航 -->
				<view class="list-nav">
					<ul>
						<li v-for="(item,index) in shopNav" :key="index" @click="changeActiveRight(item.sortKey
)" :class="{active : item.sortKey === sortActive}">
							{{ item.title }}
						</li>
					</ul>
				</view>
				<!-- 商品列表 -->
				<view class="list">
					<view class="list-item" v-for="(item,index) in shopList" :key="index" @click="toDetail(item.iid)">
						<view class="i-img">
							<img :src="item.img" alt="" />
							<view class="i-soldNum">
								已售{{item.sale}}件
							</view>
						</view>
						<view class="i-bottom">
							<view class="i-text">
								{{item.title}}
							</view>
							<view class="i-price-collectNum">
								<view class="price">
									¥{{item.price}}
								</view>
								<view class="collectNum">
									<view class="num">
										{{item.cfav}}
									</view>
									<view class="icon">
										<image src="/static/collect.png" mode="widthFix" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		get
	} from '../../api';
	const jumpSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	//右侧图片导航
	const imgCategory = ref([])
	//左边分类切换高亮
	const navList = ref([])
	const currentActive = ref(0)
	//点击切换类名
	const changeActiveLeft = (pid = 3627, fcid = 10062603) => {
		console.log(pid);
		currentActive.value = pid;
		uni.request({
			url: 'https://apis.netstart.cn/mogujie/category/getSub',
			method: 'GET',
			data: {
				pid: pid
			},
			success: (res) => {
				// console.log(res);
				imgCategory.value = res.data.data.list
				console.log("11:", imgCategory.value);
			},
			fail: (err) => {
				console.error(err)
			}
		})
		changeActiveRight('pop', fcid, 1)
	}
	//右边商品列表分类导航切换高亮
	const shopNav = ref([])
	const sortActive = ref('pop')
	//商品列表
	const shopList = ref([])
	//点击切换类名
	const changeActiveRight = async (sortkey = 'pop', fcid = 3627, page = 1, ) => {
		// let fcid
		// fcid = pid
		// sort = item.sortkey
		// fcid= pid
		sortActive.value = sortkey;
		await uni.request({
			url: 'https://apis.netstart.cn/mogujie/category/miniWall',
			method: 'GET',
			data: {
				fcid,
				page,
				sort: sortkey
			},
			success(res) {
				// console.log("右边分类列表:",res);
				shopList.value = res.data.result.wall.docs
				console.log("右边商品列表:", shopList.value);
			},
			fail: (err) => {
				console.error(err)
			}
		})
	}

	//左边分类名字
	const getCategories = async () => {
		await get('/category.json').then(res => {
			// console.log(res);
			navList.value = res.data[117330].list
			// console.log(navList.value);
		})
	}

	//右边分类的名字
	const rightCategory = async () => {
		await get('/category/miniWall').then(res => {
			// console.log("右边分类：",res);
			shopNav.value = res.result.sortFilter
			console.log("右边分类名字：", shopNav.value);
		})
	}
	const navImg = (link, title) => {
		const queryString = link.split('?')[1];
		const params = new URLSearchParams(queryString);
		const fcid = params.get('fcid');
		uni.navigateTo({
			url: `/pages/searchResult/searchResult?q=${fcid}&isSearch=false&name=${title}`
		})
	}
	const toDetail = (iid) => {
		uni.navigateTo({
			url: `/pages/detail/detail?itemId=${iid}`
		});
	}
	getCategories()
	changeActiveLeft()
	rightCategory()
</script>